<div class="container">
	<div id="iconsmain">
	<div class="page-header-small">
		<h1 data-i18n="Custom Icons">Custom Icons</h1><span></span>
	</div>
    <div class="page-content-container">
        <div class="row" style="margin: 0;">
            <div class="iconcell iconlist" style="margin: 0 10px; min-height: 200px; max-height: 400px;">
                <div class="iconlistitem" data-ng-repeat="icon in iconset | orderBy:['name']" ng-class="{iconlistitemselected: icon.selected }" ng-click="OnIconSelected(icon)">
                        <img ng-src="{{icon.IconFile48On}}">
                        <h3>{{icon.Title}}</h3>
                        <p>{{icon.Description}}</p>
                    </div>
                </div>
            </div>
            <br>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 10px;">
                <tr>
                    <td align="left" colspan="2">
                        <input name="fileupload" id="fileupload" maxlength="409600" value="" class="inputbox autowidth" file-model="myFile" type="file" accept=".zip">
                        <button class="btn btn-info" ng-click="UploadIconSet()" data-i18n="Upload">Upload</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="page-content-container" ng-hide="selectedIcon.length==0">
        <div class="iconedit" ng-hide="selectedIcon.length==0">
            <table id="customiconedittable" border="0" cellpadding="0" cellspacing="10" width="100%">
                <tr>
                    <td align="right" style="width:110px"><label for="iconname"><span data-i18n="Name"></span>:</label></td>
                    <td><input type="text" id="iconname" ng-model="selectedIcon.Title" style="width: 200px; padding: .2em;" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td align="right"><label for="icondescription"><span data-i18n="Description"></span>:</label></td>
                    <td><input type="text" id="icondescription" ng-model="selectedIcon.Description" style="width: 200px; padding: .2em;" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td align="right"><label><span data-i18n="Icons"></span>:</label></td>
                    <td>
                        <img ng-src="{{selectedIcon.IconFile16}}"> <img ng-src="{{selectedIcon.IconFile48On}}"> <img ng-src="{{selectedIcon.IconFile48Off}}">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <br>
                        <button class="btn btn-info" ng-click="UpdateIconTitleDescription()" data-i18n="Update">Update</button>&nbsp;&nbsp;&nbsp;
                        <button type="button" class="btn btn-danger" ng-click="DeleteIcon()" ng-disabled="selectedIcon.length==0" data-i18n="Delete">Delete</button>
                    </td>
                </tr>
            </table>
            <br>
        </div>
    </div>
</div>